<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>

    <div id="app">
        <student-list :list="goodsList"></student-list>
    </div>
    <script>
        var { h } = Vue;

        var app = Vue.createApp({
            data: function () {
                return {
                    goodsList: [
                        { id: 0, name: '张三', sex: '男', grade: '2021级', phoneNum: 17876789865 },
                        { id: 1, name: '李四', sex: '男', grade: '2021级', phoneNum: 17876734865 },
                        { id: 2, name: '王五', sex: '男', grade: '2021级', phoneNum: 17876780065 },
                        { id: 3, name: '李华', sex: '女', grade: '2021级', phoneNum: 17876770065 },

                    ]
                }
            }
        });

        app.component('student-list', {
            props: ['list'],
            render: function () {
                const thList = ['姓名', '性别', '年级', '电话'];

                var thNodes = thList.map(function (title) {
                    return h('th', { width: '100' }, title)
                });

                var theadNode = h('thead', h('tr', thNodes));

                var tbodyTrNodes = this.list.map(function (item) {
                    const props = { align: 'center' };

                    return h('tr', { key: item.id }, [
                        h('td', props, item.name),
                        h('td', props, item.sex),
                        h('td', props, item.grade),
                        h('td', props, item.phoneNum)
                    ])
                });

                var tbodyNode = h('tbody', tbodyTrNodes)

                return h('table', {
                    border: true,
                    align: 'center',
                    cellspacing: 0
                }, [
                    theadNode,
                    tbodyTrNodes
                ]);
            }
        });

        app.mount('#app');
    </script>
</body>

</html>